<template>
	<view class="container">
		<u-navbar title="AI绘画" :is-back="false" titleColor="#fff" :background="background"></u-navbar>
		</u-navbar>
		<u-notice-bar mode="horizontal" :list="noticeList" :duration="7000"></u-notice-bar>
		<view style="display: flex; justify-content: center;">
			<view class="input-area">
				<view class="text-title">
					绘画内容描述
				</view>
				<textarea v-model="description" placeholder="请一次尽可能完善的描述你的图片,比如:[一个漂亮的猫,在桌子上,看着观众,写实风格]" maxlength="500"
					class="input-box">
					</textarea>
				<view class="clear-text" @click="clearDescription">
					清空文本
				</view>
			</view>
		</view>
		<view class="image-box">
			<view class="image-model">
				<view style="font-size: 28rpx; font-weight: 600; color: #fff;">
					图片比例：
				</view>
				<view style="margin-top: 20rpx;">
					<radio-group class="radio-fa" v-model="define" @change="radioChange">
						<radio name="option" value="9:16" checked="true">9:16</radio>
						<radio name="option" value="16:9">16:9</radio>
						<radio name="option" value="1:1">1:1</radio>
						<radio name="option" value="1:2">1:2</radio>
						<radio name="option" value="2:3">2:3</radio>
						<radio name="option" value="3:2">3:2</radio>
						<radio name="option" value="3:4">3:4</radio>
						<radio name="option" value="4:3">4:3</radio>
					</radio-group>
				</view>
				<view style="font-size: 28rpx; font-weight: 600; color: #fff;">
					路线：
				</view>
				<view style="margin-top: 20rpx;">
					<radio-group class="radio-fa" v-model="define" @change="lineRadioChange">
						<radio name="option" value="1" checked="true">慢速(不稳定)</radio>
						<radio name="option" value="2">快速</radio>
					</radio-group>
				</view>
			</view>
		</view>


		<view class="button-area" v-show="showButton">
			<button @click="generateImage" class="generate-button" v-show="line == 1">生成图片(-6)</button>
			<button @click="generateImage" class="generate-button" v-show="line == 2">生成图片(-18)</button>
		</view>
		<view v-if="showDownTme" style="position: fixed;top: 80%;left: 35%;">
			<u-circle-progress active-color="#9fccff" :duration="timeOut" :percent="bfb" bg-color="#232428">
				<view class="u-progress-content">
					<text class='u-progress-info'>预计{{timeOut}}秒</text>
				</view>
			</u-circle-progress>

		</view>
		<view class="container-image">
			<view class="row">
				<image class="image" v-for="(image, index) in row1Images" :src="image" mode="widthFix" :key="index"
					@click="findDetail(image)"></image>
			</view>
			<view class="row">
				<image class="image" v-for="(image, index) in row2Images" :src="image" mode="widthFix" :key="index"
					@click="findDetail(image)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		set
	} from '../../config/db';
	export default {
		data() {
			return {
				background: this.TopColor,
				description: '', // 输入的文字
				define: '9:16', //比例默认
				line: 1, //默认是2
				row1Images: [],
				row2Images: [],
				showDownTme: false,
				showButton: true,
				taskId: '',
				userId: '',
				timeOut: 400,
				bfb: 0,
				myInterval: {},
				lastBfb: {},
				isWaiting: false,
				noticeList: ["请不要输入敏感词汇,生成图片中请不要离开页面，如果离开页面稍后可到【我的->AI绘图记录】中查看"]
			};
		},
		onShow() {
			this.showButton = !this.showDownTme
			this.userId = this.$db.userInfo()['id'];
		},

		methods: {
			findDetail(img) {
				this.$common.navigateTo('/pages/midjourney/detail?img=' + img)
			},
			radioChange(value) {
				this.define = value.target.value;
			},
			lineRadioChange(value) {
				this.line = value.target.value;
			},
			clearDescription() {
				console.log("清空文本")
				this.description = ''
			},
			async generateImage() {

				if (!this.$db.userInfo()) {
					this.$common.errorToShow('请先登录', () => {
						this.$common.jumpToLogin()
					})
					return
				}

				if (this.description == '') {
					this.$common.errorToShow('请输入魔法哦!')
					return
				}

				if (this.isWaiting) {
					uni.showModal({
						title: '绘图提示',
						content: '在在绘图，请耐心等待',
						showCancel: false,
						confirmText: "知道了"
					});
					return
				}
				// 2.如果有积分进行图片生成
				this.generatePicture()
			},
			/**
			 * 生成托的请求
			 */
			async generatePicture() {
				//初始化
				this.taskId = ''
				this.myInterval = {}
				this.lastBfb = {}
				//初始化
				if (this.line == 1) {
					this.timeOut = 400
				} else if (this.line == 2) {
					this.timeOut = 200
				}
				this.bfb = 0
				this.row1Images = []
				this.row2Images = []
				let data = JSON.stringify({
					"action": "generate",
					"prompt": this.description,
					"define": this.define,
					"line": this.line
				})
				console.log(data)
				let _this = this;
				//发送http请求
				uni.showLoading({
					title: "绘图任务创建中"
				})
				let generateImagePromise = await this.$http.post("/AIDrawing/generatePicture", data);
				let generateImage = await generateImagePromise;
				uni.hideLoading()
				this.showDownTme = true
				this.isWaiting = true;
				this.showButton = false
				if (generateImage.success) {
					let taskId = generateImage.data;
					this.taskId = taskId
					this.getImagesTimeInterva()
				} else {
					this.isWaiting = false
					this.showDownTme = false
				}
			},
			async getImagesTimeInterva() {
				console.log("执行查询图片")
				this.myInterval = setInterval(this.getImages, 1000);
			},
			async getImages() {
				if (this.line == 1) {
					this.bfb = this.bfb + 0.25 //进度环的进度
				} else if (this.line == 2) {
					this.bfb = this.bfb + 0.5 //进度环的进度
				}
				if (this.timeOut != 0) {
					this.timeOut = this.timeOut - 1
				} else {
					this.timeOut = 0
					this.showDownTme = false
					this.showButton = true
					this.clearTime() //清理时间,不在请求
					//提示
					uni.showModal({
						title: '绘图提示',
						content: '等待超时，完成之后可以绘画记录中查看',
						showCancel: false,
						confirmText: "知道了"
					});
					return;
				}
				//每5s请求一次
				if (this.timeOut % 5 != 0) {
					return;
				}
				this.findImage()
			},

			//查询图片
			async findImage() {
				let imagesRepPromise = await this.$http.get('/AIDrawing/getUserImageList', {
					"phoneNumber": this.$db.userInfo()['phoneNumber'],
					"taskId": this.taskId
				})
				let imagesRep = await imagesRepPromise;
				console.log("查询的图片：", imagesRep)
				let data = imagesRep.data
				if (data && data != null && data != 'null') {
					this.row1Images = []
					this.row2Images = []
					//有数据返回渲染
					this.row1Images.push(data['images'][0])
					this.row1Images.push(data['images'][1])
					this.row2Images.push(data['images'][2])
					this.row2Images.push(data['images'][3])
					this.clearTime() //清理时间
				}
			},
			clearTime() {
				clearInterval(this.myInterval)
				clearInterval(this.lastBfb)
				this.myInterval = {}
				this.lastBfb = {}
				this.showDownTme = false;
				this.isWaiting = false
				this.showButton = true
			},
		}
	};
</script>

<style>
	.container {
		height: 100vh;
		width: 100%;
		background-color: #232428;
	}

	.container-image {
		display: flex;
		/* height: 100%; */
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: wrap;
	}

	.row {
		flex: 100%;
		flex-wrap: wrap;
	}

	.image {
		flex: 50%;
		max-width: 375rpx;
	}

	.text-title {
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		border-bottom: 1px solid #cccccc;
		padding: 20rpx 15rpx;
	}

	.input-area {
		margin-top: 40rpx;
		/* padding: 15rpx; */
		width: 90%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.input-area textarea {
		text-align: justify;
		width: 90%;
		border: none;
		height: 150rpx;
		color: #fff;
		/* width: 100%; */
	}

	.input-box {
		width: 100%;
		/* height: 200rpx; */
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 15rpx;
		font-size: 14px;
	}

	.button-area {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.generate-button {
		margin-top: 100rpx;
		margin-bottom: 30px;
		color: #fff;
		/* 设置文字颜色 */
		border: none;
		/* 移除边框样式 */
		padding: 0rpx 100rpx;
		/* 设置内边距 */
		font-size: 30rpx;
		/* 设置字体大小 */
		border-radius: 40rpx;
		/* 设置圆角 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		/* 添加阴影效果 */
		background-color: #8dcdff;

	}

	.clear-text {
		width: 100%;
		color: #18a2e1;
		font-size: 28rpx;
		text-align: right;
		border-top: 1px solid #cccccc;
		padding: 20rpx;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #8dcdff;
	}

	/* 	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	} */

	.u-progress-info {
		font-size: 26rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	.image-box {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.image-model {
		width: 90%;
		background-color: rgba(255, 255, 255, 0.2);
		box-sizing: border-box;
		padding: 10rpx;
		border-radius: 15rpx;
	}

	.radio-fa {
		line-height: 30rpx;
	}

	.radio-fa radio {
		transform: scale(0.8);
		color: #9fccff;
	}
</style>